<template>
  <div class="project-list-page">
    <div class="project-list-header">
      <div class="search-row">
        <input v-model="search" class="search-input" placeholder="项目名称/编码" />
        <button class="search-btn" @click="onSearch">
          <svg viewBox="0 0 20 20" fill="none"><circle cx="9" cy="9" r="7" stroke="currentColor" stroke-width="2"/><path d="M15.5 15.5L13 13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
        </button>
      </div>
      <div class="divider"></div>
      <div class="action-row">
        <button class="add-btn" @click="goEdit()">+ 新增项目</button>
        <button class="delete-btn" :disabled="!hasSelected" @click="deleteSelected">删除选中</button>
      </div>
    </div>
    <div class="table-scroll-area">
      <table class="project-table">
        <thead>
          <tr>
            <th><input type="checkbox" v-model="selectAll" @change="toggleAll" /></th>
            <th>序号</th>
            <th>项目类别</th>
            <th>项目编码</th>
            <th>项目明细编码</th>
            <th>项目名称</th>
            <th>项目说明</th>
            <th>除外内容</th>
            <th>计价单位</th>
            <th>单价</th>
            <th>备注</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, idx) in pagedProjects" :key="item.id" :class="{alt: idx % 2 === 1}">
            <td><input type="checkbox" v-model="item.selected" /></td>
            <td>{{ idx + 1 }}</td>
            <td>{{ item.category }}</td>
            <td>{{ item.code }}</td>
            <td>{{ item.detailCode }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.target }} {{ item.content }}</td>
            <td>{{ item.exclude }}</td>
            <td>{{ item.unit }}</td>
            <td>{{ item.price }}</td>
            <td>{{ item.remark }}</td>
            <td>
              <a href="#" @click.prevent="goEdit(item)">编辑</a>
              <span style="margin: 0 4px;">|</span>
              <a href="#" @click.prevent="deleteOne(item)">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="pagination-bar" v-if="pageCount > 1">
      <button @click="gotoPage(page-1)" :disabled="page===1">上一页</button>
      <span>第 {{page}} / {{pageCount}} 页</span>
      <button @click="gotoPage(page+1)" :disabled="page===pageCount">下一页</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
const search = ref('')
const selectAll = ref(false)
const page = ref(1)
const pageSize = 100
const router = useRouter()
const projects = ref([
  { id: 1, category: 'G', code: '3000000001', detailCode: '453300000000001', name: '项目A', target: '目标A', content: '内容A', exclude: '公文', unit: '台次', price: 180, remark: '', selected: false },
  { id: 2, category: 'G', code: '3000000002', detailCode: '453300000000002', name: '项目B', target: '目标B', content: '内容B', exclude: '公文', unit: '台次', price: 250, remark: '', selected: false },
  { id: 3, category: 'G', code: '3000000003', detailCode: '453300000000003', name: '项目C', target: '目标C', content: '内容C', exclude: '公文', unit: '台次', price: 500, remark: '', selected: false },
  { id: 4, category: 'G', code: '3000000004', detailCode: '453300000000004', name: '项目D', target: '目标D', content: '内容D', exclude: '公文', unit: '台次', price: 320, remark: '常规', selected: false },
  { id: 5, category: 'G', code: '3000000005', detailCode: '453300000000005', name: '项目E', target: '目标E', content: '内容E', exclude: '公文', unit: '台次', price: 410, remark: '', selected: false },
  { id: 6, category: 'G', code: '3000000006', detailCode: '453300000000006', name: '项目F', target: '目标F', content: '内容F', exclude: '公文', unit: '台次', price: 275, remark: '特殊', selected: false },
  { id: 7, category: 'G', code: '3000000007', detailCode: '453300000000007', name: '项目G', target: '目标G', content: '内容G', exclude: '公文', unit: '台次', price: 600, remark: '', selected: false },
  { id: 8, category: 'G', code: '3000000008', detailCode: '453300000000008', name: '项目H', target: '目标H', content: '内容H', exclude: '公文', unit: '台次', price: 150, remark: '', selected: false },
  { id: 9, category: 'G', code: '3000000009', detailCode: '453300000000009', name: '项目I', target: '目标I', content: '内容I', exclude: '公文', unit: '台次', price: 800, remark: '高价', selected: false },
  { id: 10, category: 'G', code: '3000000010', detailCode: '453300000000010', name: '项目J', target: '目标J', content: '内容J', exclude: '公文', unit: '台次', price: 90, remark: '', selected: false },
])
const filteredProjects = computed(() => {
  if (!search.value) return projects.value
  return projects.value.filter(item => item.name.includes(search.value) || item.code.includes(search.value))
})
const pageCount = computed(() => Math.ceil(filteredProjects.value.length / pageSize))
const pagedProjects = computed(() => filteredProjects.value.slice((page.value-1)*pageSize, page.value*pageSize))
const hasSelected = computed(() => projects.value.some(item => item.selected))
function onSearch() { page.value = 1 }
function goEdit(item) {
  if (item) {
    localStorage.setItem('editProject', JSON.stringify(item))
    router.push(`/projects/edit/${item.id}`)
  } else {
    localStorage.removeItem('editProject')
    router.push('/projects/edit/new')
  }
}
function deleteOne(item) {
  projects.value = projects.value.filter(d => d.id !== item.id)
}
function deleteSelected() {
  projects.value = projects.value.filter(d => !d.selected)
  selectAll.value = false
}
function toggleAll() {
  pagedProjects.value.forEach(item => item.selected = selectAll.value)
}
function gotoPage(p) {
  if (p >= 1 && p <= pageCount.value) page.value = p
}
</script>

<style scoped>
.project-list-page {
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  width: 100%;
  min-height: 600px;
  display: flex;
  flex-direction: column;
}
.project-list-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 18px;
  gap: 0;
  background: #f6f8fa;
  padding: 32px 32px 18px 32px;
  border-radius: 8px;
  margin-left: 32px;
  margin-right: 32px;
}
.search-row {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  width: 100%;
}
.action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 0;
  padding-left: 0;
}
.search-input {
  width: 340px;
  height: 38px;
  border: 1px solid #d0d5dd;
  border-radius: 4px;
  padding: 0 16px;
  font-size: 16px;
  background: #fff;
  margin-right: 0;
}
.search-btn {
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  height: 38px;
  width: 38px;
  padding: 0;
  font-size: 18px;
  cursor: pointer;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}
.divider {
  width: 100%;
  height: 1px;
  background: #e5e6eb;
  margin: 0 0 18px 0;
}
.add-btn {
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  height: 36px;
  padding: 0 18px;
  font-size: 15px;
  cursor: pointer;
  margin-right: 10px;
  box-shadow: none;
}
.delete-btn {
  background: #f56c6c;
  color: #fff;
  border: none;
  border-radius: 4px;
  height: 36px;
  padding: 0 18px;
  font-size: 15px;
  cursor: pointer;
  box-shadow: none;
}
.delete-btn:disabled {
  background: #e0e0e0;
  color: #aaa;
  cursor: not-allowed;
}
.project-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  margin-top: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}
.project-table tr.alt {
  background: #f7f9fb;
}
.project-table tr {
  background: #fff;
}
.project-table th, .project-table td {
  border-bottom: 1px solid #ececec;
  padding: 18px 8px;
  text-align: center;
  font-size: 17px;
  color: #222;
  background: transparent;
}
.project-table th {
  background: #f7f8fa;
  color: #34495e;
  font-weight: 700;
  border-bottom: 2px solid #e5e6eb;
  font-size: 15.5px;
}
.project-table tbody tr:hover td {
  background: inherit !important;
}
.project-table tr:last-child td {
  border-bottom: none;
}
.project-table a {
  color: #409eff;
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
  margin: 0 2px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.18s;
}
.project-table a:hover {
  background: #eaf3ff;
  text-decoration: underline;
}
.pagination-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin: 24px 0 0 0;
}
.pagination-bar button {
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 4px 18px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s;
}
.pagination-bar button:disabled {
  background: #e0e0e0;
  color: #aaa;
  cursor: not-allowed;
}
.table-scroll-area {
  margin-bottom: 12px;
  background: #fff;
  border-radius: 0 0 8px 8px;
}
</style> 